<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 100px;
            height: 2000px;
        }

        h4 {
            margin: 2em 0 0;
            background-color: #333;
            color: #fff;
            padding: 10px;
            top: 0;
            z-index: 1;
            position: sticky;
        }
    </style>
</head>
<body>
<h1>时间固定demo</h1>
<div className={style.wrapper}>
    <section>
        <h4>5月20日</h4>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </section>
    <section>
        <h4>5月19日</h4>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
    <section>
        <h4>5月19日</h4>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
    <section>
        <h4>5月19日</h4>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
    <section>
        <h4>5月19日</h4>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </section>
</div>
</body>
</html>